import { Button, Col, Row,Divider  } from 'antd'
import React, { useEffect, useState } from 'react'
import { exportWord } from 'mhtml-to-word'
import "./TongJi1.css"
import axios from 'axios'
export default function TongJi1(props) {
    const [dataBase,setDataBase]=useState({
        xingMing:"",
        yaoPinJiaGe:{
            yaoPinMing:""
        },
        jianChaXiangMuDingJiaList:[{
            jiaGe:"",
            mingCheng:""
        }]
    })
    const [list,setList]=useState([])
    const daYin=()=>{
        exportWord({
            filename: "收费收据",
            selector: ".shouJu",
            style:''
        })
    }
    
    const getData=()=>{
        let data=props.location.state
        axios("/chuFangRiJi/shouFeiShouJu",{
            method:"post",
            headers: { "Content-Type": "application/json" },
            data:{
                jiJiaRiQi:data.riQi,
                yiLiaoKaHao:data.yiLiaoKaHao
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data.code===200){
                console.log(res.data.data);
                let tempArr=res.data.data
                let tempArr2=tempArr.jianChaXiangMuDingJiaList
                let arr=[]
                let sum=0
                for(let i=0;i<tempArr2.length;i++){
                    let temp={}
                    temp.key=i+1
                    temp.mingCheng=tempArr2[i].mingCheng
                    temp.jiaGe=tempArr2[i].jiaGe
                    sum+=tempArr2[i].jiaGe
                    arr.push(temp)
                }
                tempArr.sum=sum
                setDataBase(tempArr)
                setList(arr)
            }
        })
        .catch(err=>{
            console.log(err);
        })
    }
    useEffect(()=>{ 
        getData()
    },[])
    return (
        <div style={{backgroundColor:"white"}}>
        <div className="shouJu">
            <Row className="contentBody">
                <Col span={9} style={{textAlign:"center"}}>
                    <Divider  orientation="left" ><span style={{fontSize:"1.5rem"}}>收费收据</span></Divider >
                </Col>
            </Row>
            <Row className="contentBody">
                <Col span={2}><span>姓名:</span>{dataBase.xingMing}</Col>
                <Col span={2}><span>医疗卡号:</span>{props.location.state.yiLiaoKaHao}</Col>
                <Col span={2}><span>诊断医生:</span>{dataBase.yiShengMingCheng}</Col>
            </Row>
            <Row className="contentBody">
                <Col span={24}><h3>药品</h3></Col>
                <Col span={2}><span>药品名称:</span>{dataBase.yaoPinJiaGe.yaoPinMing}</Col>
                <Col span={2}><span>药品代号:</span>{dataBase.yaoPinDaiHao}</Col>
                <Col span={2}><span>单价:</span>{dataBase.yaoPinJiaGe.danJia}</Col>
                <Col span={2}><span>规格:</span>{dataBase.yaoPinJiaGe.guiGe}</Col>
                <Col span={2}><span>单位:</span>{dataBase.yaoPinJiaGe.danWei}</Col>
                <Col span={2}><span>金额:</span>{dataBase.jinE}</Col>
            </Row>
            
            <Row className="contentBody">
                <Col span={24}><h3>检查项目收费</h3></Col>
                {
                    list.map(item=>(
                     <Col span={2}><span>{item.mingCheng}:</span>{item.jiaGe}</Col>
                    ))
                }
            </Row>
            <Row className="contentBody">
                <Col span={2} offset={8}><span>总费用:</span>{dataBase.sum+dataBase.jinE}</Col>
                <Col span={2} ><span>预缴金额:</span>1000</Col>
            </Row>
            <Row className="contentBody">
                <Col span={2} offset={9}><span>剩余金额:</span>{1000-dataBase.sum-dataBase.jinE}</Col>
            </Row>
        </div>
        <Col span={9} style={{textAlign:"center"}}>
        <Button onClick={daYin} style={{backgroundColor:"blue",color:"white",width:"200px"}}>导出</Button>

        </Col>
        </div>
    )
}
